import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        const data = {
            total: {
                title: '医保\n\n类型',
            },
            data: [
                { value: 321, name: '自费' },
                { value: 321, name: '市医保' },
                { value: 321, name: '新农合' },
                { value: 621, name: '省医保' },

            ]
        }
        const option = {
            //我的代码
            color: ['#21c4a5', '#ef2b67', '#df9a24', '#22adcf'],
            tooltip: {
                trigger: 'item',
                padding: 0,
                borderWidth: 0,
                formatter: (params) => {
                    return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
                        box-shadow: 0 4px 9px 0 rgba($color: #FFFFFF, $alpha: 0.1);
                        padding:0 12px;
                        display: flex;
                        align-items: center;
                        border-radius: 4px;
                        font-size: 6px;" class="tooltip-area"><p>${params.marker}${params.name}</p></div>`
                },
            },
            legend: {
                show: false
            },
            title: {
                text: data.total.title,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '12px',
                    fontWeight: 'normal',
                    textShadow: '2px 2px 4px #f0f0f0', // 添加字体阴影效果
                },
                subtext: data.total.figure,
                subtextStyle: {
                    color: '#FFFFFF',
                    fontSize: '0.8vw',
                    fontWeight: '200'
                },
                top: "center",
                left: 'center'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: `{a|{b}}: 42%\n\n321人`,
                        alignTo: 'labelLine',
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: '12px',
                            },
                            b: {
                                color: '#FFFFFF',
                                fontSize: '1vw',
                                fontWeight: '600'
                            },
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            cap: 'round'
                        }
                    },
                    data: data.data
                }
            ]
        };
        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '22vw', height: '12vw', maxWidth: '22vw', maxHeight: '12vw' }}></div>;
};

export default EChartsComponent;

